<!--  -->
<template>
  <div>家属222
  {{ list }}
    <el-button @click="add">添加</el-button>

    <el-table :data="formData!.family" style="width: 100%">
 
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="mobile" label="电话" />
    <el-table-column   label="操作" >  
      <template #default="scope">
        <el-button @click="handleEdit(scope.$index)">编辑</el-button>
        <el-button type="danger" @click="handleDelete(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

    <el-dialog
    
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    label-width="auto"
  >
    <el-form-item label="姓名" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="电话" prop="name">
      <el-input v-model="ruleForm.mobile" />
    </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="confirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

  </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,onMounted, inject} from 'vue'
import { Elderly, FamilyMember } from '../../apis/elderly/type';
const dialogVisible = ref(false)
// const list=ref<FamilyMember[]>([]);

const editIndex = ref(-1);

const formData=inject<Elderly>("formData");
let ruleForm = ref<FamilyMember>({
    name: "",
    mobile: ""
})

const handleEdit=(index:number)=>{

    editIndex.value=index;
    ruleForm.value=JSON.parse(JSON.stringify(formData!.family![index])) ;
    dialogVisible.value=true

}
const handleDelete=(index:number)=>{

    formData!.family!.splice(index,1);

}
const confirm=()=>{
    
    if( editIndex.value==-1){

        formData?.family?.push(ruleForm.value);
        // list.value.push(ruleForm.value);
    }
    else{

        
            formData!.family!.splice(editIndex.value,1,ruleForm.value);
        
    }

    dialogVisible.value=false
}
const handleClose = (done: () => void) => {
    dialogVisible.value=false
};
const add=()=>{

    editIndex.value=-1;
    ruleForm.value={ name: "",
    mobile: ""}

    // ruleForm= Object.assign({},{}) as FamilyMember
    dialogVisible.value=true
//   list.value.push({
//     name:'张三',
//     phone:'12345678901',
//     relation:'父子'
//   })
}

</script>
<style scoped>
</style>